<template>
	<view id="sort">
		<!-- 搜索 -->
		<view class="sort-search">
			<LhSamllSearch :disabled="true" @search="search"></LhSamllSearch>
		</view>
		<!-- 分类选择 -->
		<scroll-view scroll-y="true" class="select-classfiy" :style="{'height':scrollTop+'px'}">
			<view class="select-cl-item" :class="{'select-active':selectIndex==index}" v-for="(item,index) in cate" :key="item.id"
			 @click="bindSelect(index)">
				<text :class="{'select-active-txt':selectIndex==index}">{{item.name}}</text>
			</view>
		</scroll-view>
		<!-- 分类列表 -->
		<scroll-view scroll-y="true" class="classfiy-list" :style="{'height':scrollTop+'px'}" :scroll-into-view="scrollIntoId"
		 :scroll-with-animation="true" @scroll="bindScroll">
			<view class="classfiy-shop-fl" v-for="(item,index) in cate" :key="index">
				<!-- 标题 -->
				<view class="classfiy-shop-title" :id="'a'+index">{{item.name}}</view>
				<view class="classfiy-shop-list">
					<view class="classfiy-shop-item" v-for="(secondItem,ii) in item.second_cate" :key="ii" @click="bindCarFood(secondItem,item)">
						<image :src="IMG_URL+secondItem.img" mode="aspectFill" lazy-load="true"></image>
						<!-- <view :style="{'width':'132rpx','height':'132rpx','background':`url(${IMG_URL+secondItem.img}) no-repeat`,'background-size':'cover','object-fit': 'cover'}"></view> -->
						<text>{{secondItem.name}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="clear"></view>
	</view>
</template>

<script>
	const app = getApp();
	import LhSamllSearch from '@/wxcomponents/lh-small-search/lh-small-search.vue'
	import {
		nabercatCate
	} from '@/api/index.js'
	export default {
		components: {
			LhSamllSearch
		},
		data() {
			return {
				IMG_URL: app.globalData.IMG_URL, //图片前缀
				cate: [], //分类
				scrollIntoId: '', //锚点定位
				scrollTop: 400, //滚动条高度
				selectIndex: 0,
			}
		},
		methods: {
			// 获取分类
			nabercatCate: function() {
				nabercatCate().then(res => {
					this.cate = res
					console.log(res)
				})
			},

			// 点击选择分类
			bindSelect: function(index) {
				this.selectIndex = index;
				this.scrollIntoId = `a${index}`
			},

			// 滚动条事件
			bindScroll: function(e) {},

			// 跳转到列表
			bindCarFood: function(e, item) {
				if(item.if_brand=='yes'){
					uni.navigateTo({
						url: `/pageA/cat-food/cat-food?brand=${e.id}`
					});
				}else{
					uni.navigateTo({
						url: `/pageA/cat-food/cat-food?tag=${e.id}`
					});
				}
			},

			// 搜索
			search: function() {
				uni.navigateTo({
					url: `/pageA/search/search`
				})
			}
		},
		onLoad() {
			this.nabercatCate(); //分类
		},
		onReady() {
			const query = uni.createSelectorQuery().in(this);
			// 获取窗口可用高度
			uni.getSystemInfo({
				success: (res) => {
					// 获取搜索框高度
					query.select(".sort-search").boundingClientRect((data) => {
						this.scrollTop = res.windowHeight - data.height;
					}).exec()
				}
			});
		}
	}
</script>

<style scoped lang="scss">
	#sort {
		width: 100%;
		background: #F5F5F5;

		.sort-search {
			padding: 32rpx;
		}

		.select-classfiy {
			float: left;
			width: 25.6%;

			.select-cl-item {
				width: 100%;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				color: #333333;
				font-size: 32rpx;
			}

			.select-active {
				background: #FFFFFF;
				font-size: 36rpx;
				font-weight: 600;
				border-radius: 16rpx 0rpx 0rpx 16rpx;
			}

			.select-active-txt {
				position: relative;

				&::after {
					content: "";
					width: 28rpx;
					height: 28rpx;
					background: url(../../static/images/solt-active.png) no-repeat;
					background-size: cover;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: -10rpx;
				}
			}
		}

		.classfiy-list {
			float: left;
			width: 74.4%;
			padding: 24rpx 32rpx;
			box-sizing: border-box;
			background: #FFFFFF;

			.classfiy-shop-fl {
				.classfiy-shop-title {
					color: #FFC102;
					font-size: 28rpx;
					margin-bottom: 12rpx;
				}

				.classfiy-shop-list {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.classfiy-shop-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						color: #333333;
						font-size: 26rpx;
						margin-bottom: 24rpx;
						margin-right: 48rpx;
						width: 132rpx;

						&:nth-of-type(3n) {
							margin-right: 0;
						}

						&>image {
							width: 132rpx;
							height: 132rpx;
							margin-bottom: 20rpx;
						}

						&>text {
							width: 100%;
							overflow: hidden; //超出的文本隐藏
							text-overflow: ellipsis; //用省略号显示
							white-space: nowrap; //不换行
						}
					}
				}
			}
		}
	}
</style>
